<div class="month-view {{cssClass}}">
  <table class="table month-view-table">
    <thead>
    <tr>
      <td>
        <a *ngIf="hasPreMonth()" class="btn-link icmn-backward2" aria-hidden="true"
           (click)="onPreMonth()"></a>
      </td>
      <td colspan="5" class="text-center">
        <select class="date-select" [(ngModel)]="currentMonth" (change)="onDisplayWeeksChange()">
          <option *ngFor="let item of dateConfig.months; let $index = index" [ngValue]="$index">{{item}}</option>
        </select>
        <select class="date-select" [(ngModel)]="currentYear" (change)="onDisplayWeeksChange()">
          <option *ngFor="let item of yearOptions" [ngValue]="item">{{item}}</option>
        </select>
      </td>
      <td>
        <a *ngIf="hasNextMonth()" class="btn-link icmn-forward3" aria-hidden="true"
           (click)="onNextMonth()"></a>
      </td>
    </tr>
    <tr class="small text-center week-header">
      <td *ngFor="let item of dateConfig.weeks">{{item}}</td>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let week of displayWeeks">
      <td *ngFor="let day of week" class="day"
          [ngClass]="{'out-of-month': !day.inMonth, 'in-month-day': day.inMonth,'disabled': isDisabledDay(day.date)}"
          (click)="onSelectDate($event, day.date)">
        <div class="calendar-date" [ngClass]="{'bg-primary': isSelectDay(day.date)}">{{day.day}}</div>
      </td>
    </tr>
    </tbody>
    <tfoot>
    <tr class="time-picker-view bg-info">
      <td colspan="7">
        <div *ngIf="showTimePicker" class="pull-left time-panel">
          <select class="date-select" [(ngModel)]="currentHour" name="hours" [disabled]="disabled"
                  (change)="onTimeChange()">
            <option *ngFor="let item of hourOptions; let $index = index" [ngValue]="$index">{{item}}</option>
          </select>
          :
          <select class="date-select" [(ngModel)]="currentMinute" name="minutes" [disabled]="disabled"
                  (change)="onTimeChange()">
            <option *ngFor="let item of minuteOptions; let $index = index" [ngValue]="$index">{{item}}</option>
          </select>
          :
          <select class="date-select" [(ngModel)]="currentSecond" name="seconds" [disabled]="disabled"
                  (change)="onTimeChange()">
            <option *ngFor="let item of secondOptions; let $index = index" [ngValue]="$index">{{item}}</option>
          </select>
        </div>

        <button type="button" class="btn btn-sm btn-primary pull-right" [disabled]="todayIsOutOfRange()"
                (click)="today($event)">
          {{dateConfig.today}}
        </button>
      </td>
    </tr>
    </tfoot>
  </table>
</div>
